<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>滑动日历(基于轮播)-calendar</title>
		<link rel="shortcut icon" href="/public/image/favicon.png">
		<link rel="stylesheet" type="text/css" href="/public/style/cssreset-min.css">
		<link rel="stylesheet" type="text/css" href="/public/style/common.css">
		<style type="text/css">
			.calendar{
				width:350px;
				height: 260px;
				margin:0 auto 20px;
				color:#333;
				overflow: hidden;
			}
			.calendar table{
				float: left;
				width: 350px;
				table-layout:fixed;
				border-collapse: collapse;
				border-spacing: 0;
				text-align: center;
			}
			.calendar td,.calendar th{
				height: 30px;
				line-height: 30px;
				text-align: center;
			}
			.calendar td span{
				display: block;
			    width: 30px;
			    margin: 0 auto;
			    cursor: pointer;
			}
			.calendar .widget-title{
				line-height: 30px;
				text-align: center;
				border-bottom: 1px solid #ebebeb;
    			margin-bottom: 5px;
			}
			.calendar .widget-title span{
				margin: 0 10px;
			}
			.calendar .widget-title a{
				color:#666;
				margin:0 5px;
				text-decoration: none;
			}
			.calendar .widget-back{
				float: right;
			}
			.calendar .widget-today span{
				font-weight: bold;
			}
			.calendar .widget-disabled span{
				color:#999;
			}
			.calendar .widget-highlight span{
				background: #f7b82e;
				color:#fff;
				border-radius: 30px;
			}
			.calendar .widget-active span{
				background: #39c;
				color:#fff;
				border-radius: 30px;
			}
			.calendar .panel{
				width:100%;
			}
		</style>
		<script type="text/javascript" src="/public/script/jquery.min.js"></script>
		<script type="text/javascript" src="/code/jquery.slider.js"></script>
		<script type="text/javascript" src="/code/jquery.slider-calendar.js"></script>
	</head>
	<body>
		<div class="header">
            <a href="https://github.com/mumuy/widget" target="_blank">项目地址</a>
            <a href="/">返回首页</a>
        </div>
		<div class="main">
			<div class="calendar calendar1"></div>
			<div class="code">
				<p>今天到明年元旦可选，选择一个区间</p>
<pre>
var year = (new Date()).getFullYear()+1;
$('.calendar1').calendar({
	limitRange:[['today',year+'0101']],
	isRange:true
});
</pre>
			</div>
			<script type="text/javascript">
				var year = (new Date()).getFullYear()+1;
				$('.calendar1').calendar({
					limitRange:[['today',year+'0101']],
					isRange:true
				});
			</script>
			<div class="calendar calendar2"></div>
			<div class="code">
				<p>选择某一天</p>
<pre>
$('.calendar2').calendar({
	'onSelect':function(range){
		alert('你选择了'+range[0]['year']+'-'+range[0]['month']+'-'+range[0]['day']);
	}
});
</pre>
			</div>
			<script type="text/javascript">
				$('.calendar2').calendar({
					'onSelect':function(range){
						alert('你选择了'+range[0]['year']+'-'+range[0]['month']+'-'+range[0]['day']);
					}
				});
			</script>
			<div class="calendar calendar3"></div>
			<div class="code">
				<p>指定日期高亮显示，如：当前月份的15和16号</p>
<pre>
var today = new Date();
var year = today.getFullYear();
var month = today.getMonth()+1;
var string = year+(month>9?month:'0'+month);
$('.calendar3').calendar({
	highlightRange:[[string+'15',string+'16']]
});
</pre>
			</div>
			<script type="text/javascript">
				var today = new Date();
				var year = today.getFullYear();
				var month = today.getMonth()+1;
				var string = year+(month>9?month:'0'+month);
				$('.calendar3').calendar({
					highlightRange:[[string+'15',string+'16']]
				});
			</script>
			<div class="example">
				<div class="call">
					<h1>调用方法：</h1>
					<p>$(selector).calendar(options);</p>
				</div>
				<h2>options参数</h2>
				<table>
					<thead>
						<tr>
							<th width="150">参数</th>
							<th width="80">默认值</th>
							<th>说明</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>prefix</td>
							<td>'widget'</td>
							<td>生成日历的class前缀</td>
						</tr>
						<tr>
							<td>isRange</td>
							<td>false</td>
							<td>是否选择范围</td>
						</tr>
						<tr>
							<td>limitRange</td>
							<td>[]</td>
							<td>有效选择区域的范围(可以为多区间),如[['20150501','20151001']],'today'表示今天</td>
						</tr>
						<tr>
							<td>highlightRange</td>
							<td>[]</td>
							<td>指定日期范围高亮(可以为多区间),如[['20150501','20151001']],'today'表示今天</td>
						</tr>
						<tr>
							<td>onChange(day)</td>
							<td>[空]</td>
							<td>当前选中月份修改时触发,day为当月第一天,包含月份及年份信息</td>
						</tr>
						<tr>
							<td>onSelect([start,end])</td>
							<td>[空]</td>
							<td>选择日期时触发,start为开始时间,end为结束时间,包含月份及年份信息</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
		<div style="display: none;">
			<script src="http://s11.cnzz.com/z_stat.php?id=1260218562&web_id=1260218562"></script>
		</div>
	</body>
<html>
